<template>
  <div id="radar"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, toRefs } from 'vue'
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
})
const { chartData } = toRefs(props)
const { indicator, dataSeries } = chartData.value // 获取props
let chartDom
let chart
// 数据差异不大设置同一max，保证数据长短一致
indicator.forEach((item) => {
  item.max = Math.max.apply(null, dataSeries[0].value)
})
const option = ref({
  tooltip: {
    trigger: 'item',
    textStyle: {
      align: 'left', // 文字左对齐
      color: '#fff',
    },
    backgroundColor: 'rgba(0,0,0,0.4)', //设置透明度
    // extraCssText:
    //   "padding: 10px; border-radius: 10px; background: linear-gradient(0deg,#0285FF, #fff);", // 设置渐变背景色和其他样式
    formatter: function (params) {
      console.log('indicator.value,', indicator)
      var content = '<div class="tooltip-gradient">'
      for (var i = 0; i < params.value.length; i++) {
        content += params.marker + indicator[i].name + ': ' + params.value[i] + '<br/>'
      }
      content += '</div>'
      return content
    },
  },
  radar: [
    {
      indicator: indicator,
      //   center: ["25%", "50%"],
      center: ['50%', '50%'], // [左右，上下]
      //   radius: "70%",
      radius: 126,
      startAngle: 90,
      splitNumber: 5, //区域划分
      shape: 'circle', //多边形换成圆形
      // 设置轴名称的样式
      axisName: {
        color: '#fff',
        backgroundColor: {
          image:
            '',
          repeat: 'no-repeat',
        },
        padding: [2, 15],
        height: 32,
        width: 150,
        fontSize: 20,
      },
      alignTicks: false, //多轴对齐
      splitArea: {
        areaStyle: {
          color: ['#0285FF', '#094ba0', '#0d53b9', '#144079', '#1c5199'], //雷达图不同区域颜色
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10,
        },
      },
      axisLine: {
        lineStyle: {
          //   color: "transparent",//或width: 0,隐藏点到中心点连线
          color: '#1e5aa2',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#0285FF', //设置每个区域边框色
        },
      },
    },
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 2,
        },
      },
      // 点与点的连线
      lineStyle: {
        color: '#1884f7', // 设置为红色
        width: 2, // 设置线条宽度
        type: 'solid', // 设置线条类型，可选'solid', 'dashed', 'dotted'
      },
      // 设置点的样式
      itemStyle: {
        color: '#306FFF',
        // 设置边框颜色和宽度
        borderColor: '#fff',
        borderWidth: 2,
        // 设置圆点大小
        areaStyle: {
          radius: 5,
        },
      },
      data: dataSeries,
    },
  ],
})
const initChart = (data) => {
  // const { indicator, dataSeries } = data || {};
  // option.value.radar[0].indicator = indicator;
  // option.value.series[0].data = dataSeries;
  chartDom = document.getElementById('radar')
  chart = echarts.init(chartDom)
  option.value && chart.setOption(option.value)
}
onMounted(() => {
  initChart(chartData.value)
})
defineExpose({
  initChart,
})
</script>

<style lang="scss" scoped>
#radar {
  width: 100%;
  height: 434px;
}
</style>
<!-- 图表formter中样式不加scoped生效 -->
<!-- <style lang="scss"> 
.tooltip-gradient { 
 
 }
</style>  -->
